<template name="messageBox">
	<div class="rc-message-box rc-new {{#if isEmbedded}}rc-message-box--embedded{{/if}}">
		{{#unless isAnonymousOrMustJoinWithCode}}
			{{#unless tmid}}
				{{> messageBoxTyping rid=rid}}
			{{/unless}}

			{{#if isWritable}}
				{{#if popupConfig}}
					{{> messagePopupConfig popupConfig}}
					{{> messagePopupSlashCommandPreview popupConfig}}
				{{/if}}

				{{#if replyMessageData}}
					<div class="reply-preview__wrap message-popup">
					{{#each reply in replyMessageData}}
						{{> messageBoxReplyPreview input=input replyMessageData=reply}}
					{{/each}}
					</div>
				{{/if}}

				<label class="rc-message-box__container">
					<span class="rc-message-box__icon emoji-picker-icon {{#unless isEmojiEnabled}}emoji-picker-icon--disabled{{/unless}} js-emoji-picker" aria-haspopup="true">
						{{> icon block="rc-input__icon-svg" icon="emoji"}}
					</span>
					<textarea aria-label="{{_ 'Message'}}" name="msg" maxlength="{{maxMessageLength}}" placeholder="{{_ 'Message'}}" rows="1" class="rc-message-box__textarea js-input-message"></textarea>
					<div class="js-input-message-shadow"></div>
					{{#if isSendIconVisible}}
						<span class="rc-message-box__icon rc-message-box__send js-send" data-desktop>
							{{> icon block="rc-input__icon-svg" icon="send"}}
						</span>
					{{else}}
						{{# if customAction }}
							{{> Template.dynamic template=customAction.template data=customAction.data }}
						{{ else }}

							{{#if canSend}}
								{{> messageBoxAudioMessage rid=rid tmid=tmid}}
								<span class="rc-message-box__action-menu js-action-menu" data-desktop aria-haspopup="true">
									{{#if actions}}
										<span class="rc-message-box__icon">
											{{> icon block="rc-input__icon-svg" icon="plus"}}
										</span>
									{{/if}}
								</span>
							{{else}}
								<button class="js-join rc-button rc-button--primary rc-message-box__join-button">
									{{_ "join"}}
								</button>
							{{/if}}
						{{/if}}
					{{/if}}

					<span class="rc-message-box__action-label js-message-actions" data-small>
						{{#each action in actions}}
							<span class="js-message-action" data-id="{{action.id}}">
								{{> icon block="rc-message-box__action" icon=action.icon }}
							</span>
						{{/each}}
					</span>

					<span class="rc-message-box__send js-message-action js-send" disabled="{{isSendIconDisabled}}" data-small>
						{{> icon block="rc-message-box__action" icon="send"}}
					</span>
				</label>

				{{#if showFormattingTips}}
					<div class="rc-message-box__toolbar-formatting">
						{{#each formattingButton in formattingButtons}}
							{{#if formattingButton.icon}}
								<button class="rc-message-box__toolbar-formatting-item js-format" data-id="{{formattingButton.label}}" title="{{_ formattingButton.label}}">
									{{> icon block="rc-message-box__toolbar-formatting-icon" icon=formattingButton.icon }}
								</button>
							{{else}}
								<span class="rc-message-box__toolbar-formatting-item" title="{{_ formattingButton.label}}">
									<a href="{{formattingButton.link}}" target="_blank" rel="noopener noreferrer" class="rc-message-box__toolbar-formatting-link">{{formattingButton.text}}</a>
								</span>
							{{/if}}
						{{/each}}
					</div>
				{{/if}}
			{{else}}
				<div class="rc-message-box__cannot-send">
					{{#if isBlockedOrBlocker}}
						{{_ "room_is_blocked"}}
					{{else}}
						{{> messageBoxReadOnly rid=rid isSubscribed=isSubscribed onHold=onHold }}
					{{/if}}
				</div>
			{{/if}}
		{{else}}
			{{> messageBoxNotSubscribed rid=rid}}
		{{/unless}}
	</div>
</template>
